08. Exercise: Add Styles to Headers

Now it's time to complete this exercise yourself!

In this exercise you'll use styles to give titles and subtitles a consistent look throughout the app.

1. Define a new title style.

In styles.xml, define a TextAppearance.Title style that extends TextAppearance.MaterialComponents.Headline6.

Give the style the same textSize and textColor attributes you applied to the title TextView in the prior exercise:

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
      <item name="android:textSize">24sp</item>
      <item name="android:textColor">#555555</item>
</style>

2. Define a new subtitle style.

In styles.xml, define a TextAppearance.Subtitle that extends TextAppearance.Title.

Give the style the same textSize attribute you applied to the subtitle TextView in the last exercise.

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
      <item name="android:textSize">18sp</item>
</style>

Since our title and subtitle TextViews will be the same color, you don’t need to specify textColor. The Subtitle style will inherit its color from its parent, the Title style you defined above.

3. Apply the style to title TextView.

In home_fragment.xml, replace the textSize and textColor with a style=”@style/TextAppearance.Title.

android:id="@+id/title"
style="@style/TextAppearance.Title"

4. Apply the style to the subtitle TextView.

Using the prior step as an example, apply TextAppearance.Subtitle to the subtitle TextView.

 android:id="@+id/subtitle"
 style="@style/TextAppearance.Subtitle"

Run your app and verify that the headings look exactly as they did before you added the styles.

5. What happens when you add a textSize attribute.

Add a textSize attribute to the title TextView, but give it a different size. Does it overwrite the style?

If you want to start at this step, you can download this exercise from: Step.03-Exercise-Add-Styles-to-Headers.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here: Step.03-Solution-Add-Styles-to-Headers, or using this git diff.

Reference documentation

• Style resource

• Typography